<template>
    <div class="listView">
        <!-- empty -->
        <el-table :model="source" stripe :loading="loading">
            
        </el-table>
    </div>
</template>
<script>
export default {
    name:"listView",
    data(){
        return {
            msg:"hello world",
            source:{},//数据源
            loading:false,//是否加载
            pager:{
                pagesize:10,//每一页的大小
                sizes:[10,20,50,100],
                total:0,//总共数据条数
                currentPage:1,//当前页
            }
        }
    },
    mounted(){
        //TODO:挂载时调用
        // this.init();
    },
    created(){
        //TODO: 创建时调用
    },
    beforeDestroy(){
        //TODO: 销毁时调用
    },
    components:{//组件

    },
    computed:{//合成变量
        pageCount:function(){//页数
            return Math.ceil(this.total/pagesize);
        }
    },
    props:[],//传入参数
    methods:{
        init(){
            //TODO:初始化
            this.resetData();
            this.refreshData();
        },
        resetData(){
            this.source = [];
            this.pager.pagesize = 10;
            this.pager.total = 0;
            this.pager.currentPage = 1;
        },
        refreshData(){
            this.loadData(this.pager.currentPage);
        },
        nextPage(){
            this.loadData(this.pager.currentPage+1);
        },
        prevPage(){
            this.loadData(this.pager.currentPage-1);
        },
        gotoPage(page){
            if(page > 0 && page <= this.pageCount){
                this.loadData(page);
            }
        },
        pageSizeChanged(pagesize){
            this.currentPage = 1;
            this.pagesize = pagesize;
            this.refreshData();
        },
        loadData(gotoPage=1){
            this.loading = true;
            //调用接口，返回后将loading置为false
        },
    }
}
</script>
<style>

</style>

